import { categoryApi } from '@/api/category'

const category = {
  namespaced: true, // 命名空间
  state: {
    categoryList: [] // 导航列表
  },
  // state的计算属性 基于categoryList做一定的数据处理 children前俩项
  getters: {
    formatList (state) {
      return state.categoryList.map(item => {
        return {
          id: item.id,
          name: item.name,
          children: item.children.slice(0, 2),
          goods: item.goods // 用来显示右侧弹框中的列表
        }
      })
    }
  },
  mutations: {
    setCategoryList (state, list) {
      state.categoryList = list
    }
  },
  actions: {
    async asynGetCategory (ctx) {
      // 1. 发送接口请求
      const res = await categoryApi()
      // 2. 把数据拿到之后通过触发mutation存入state
      ctx.commit('setCategoryList', res.data.result)
      // 我们找一个合适的时机 把这个action函数调用一下？
      // 去哪里触发？
    }
  }

}

export default category

// 1.如何在setup中使用store

// import {useStore} from 'vuex'
// setup(){ const store = useStore() }

// 2.如何在setup中使用state中的数据

// computed(()=> store.state.模块名.属性名)

// 3.如何在setup中使用计算属性

// computed(()=> store.getters['模块名/getter名'])
